<template>
  <uni-popup ref="popup" type="bottom" @change="handlePopupChange">
    <view class="pop_body u-flex u-col-center">
      <view class="key_body">
        <view
          class="key_item"
          v-for="(item, index) in keyWordList"
          :key="index"
          @click="changeClick(item)"
        >
          <uni-icons
            v-if="item === '确定'"
            type="checkmarkempty"
            size="26"
            color="#ffa500"
          />
          <uni-icons
            v-else-if="item === '删除'"
            type="closeempty"
            size="26"
            color="#ed3c30"
          />
          <view v-else>{{ item }}</view>
        </view>
      </view>
      <view class="num_body">
        <view
          class="key_item"
          :class="{ pwd: pwd.length === index || pwd.length === 6 }"
          v-for="(_, index) in 6"
          :key="index"
        >
          {{ index < pwd.length ? "*" : "" }}
        </view>
      </view>
      <view style="text-align: center; padding: 42rpx; font-weight: 600"
        >支付密码</view
      >
    </view>
  </uni-popup>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { checkPwd } from "../../api/index";
import _ from "lodash";

// Props
interface Props {
  chcekPay: boolean;
}

const props = withDefaults(defineProps<Props>(), {
  chcekPay: false,
});

// Emits
const emit = defineEmits<{
  (e: "close"): void;
  (e: "checkConfirm", pwd: string): void;
}>();

// Refs
const popup = ref<any>(null);
const pwd = ref("");

// Constants
const keyWordList = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, "删除", "确定"] as const;

// Watchers
watch(
  () => props.chcekPay,
  (val) => {
    if (!val) {
      pwd.value = "";
      popup.value?.close();
    } else {
      popup.value?.open("bottom");
    }
  }
);

// Methods
const handlePopupChange = (e: { show: boolean }) => {
  if (!e.show) {
    emit("close");
  }
};

const changeClick = async (item: number | string) => {
  if (item === "确定") {
    if (pwd.value.length < 6) return;

    try {
      const res = await checkPwd({
        pwd: pwd.value,
      });

      if (res.data) {
        emit("checkConfirm", pwd.value);
      } else {
        uni.showToast({
          icon: "none",
          title: "密码输入错误",
        });
      }
    } catch (error) {}
    return;
  }

  if (item === "删除") {
    pwd.value = pwd.value.slice(0, -1);
    return;
  }

  if (pwd.value.length < 6) {
    pwd.value += item;
  }
};
</script>

<style lang="scss">
.pop_body {
  display: flex;
  flex-direction: column-reverse;
  background-color: #fff;
  border-top-left-radius: 20rpx;
  border-top-right-radius: 20rpx;
  padding: 20rpx 0;
  width: 100%;
  box-sizing: border-box;

  .num_body {
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    padding: 40rpx 20rpx;
    box-sizing: border-box;

    .key_item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(14vw);
      height: 120rpx;
      font-size: 40rpx;
      font-weight: 700;
      border: 1rpx solid #eee;
    }

    .pwd {
      border: 2rpx solid #a8700d !important;
    }
  }

  .key_body {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 40rpx 12rpx;
    box-sizing: border-box;

    .showColor {
      color: #a8700d !important;
    }

    .backColor {
      color: #ed3c30 !important;
    }

    .key_item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: calc(30.2vw);
      height: 90rpx;
      font-size: 40rpx;
      font-weight: 700;
      border-radius: 12rpx;
      border: 1rpx solid #eee;
      margin-bottom: 10rpx;

      &:active {
        background-color: #eee;
      }
    }
  }
}
</style>
